<!doctype html>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <link rel="icon" href="img/1.png" sizes="32x32" type="image/png">
    <link rel="icon" href="img/1.png" sizes="16x16" type="image/png">
    <link rel="stylesheet" href="../lib/bootstrap-icons/font/bootstrap-icons.min.css">
    <link rel="stylesheet" href="../lib/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="../dist/css/bootstrap-admin.min.css">
    <title>小雨滴吖的图书管理系统 - 注册</title>
</head>
<body>

<div class="min-vh-100  p-2 bg-body-tertiary d-flex flex-column align-items-center justify-content-center">
    <h2>图书管理系统注册</h2>
    <p class="text-secondary">加入我们，一起读万卷书</p>
    <form id="registerForm" class="form" style="width: 380px;max-width: 100%">
        <div class="mb-3">
            <div class="input-group">
                <span class="input-group-text bg-white "><i class="bi bi-person"></i></span>
                <input type="text" class="form-control" placeholder="请输入用户名" name="username"
                       id="username" aria-label="username">
            </div>
        </div>

        <div class="mb-3">
            <div class="input-group bsa-show_hide_password">
                <span class="input-group-text bg-white"><i class="bi bi-key"></i></span>
                <input type="password" class="form-control" placeholder="请输入密码"
                       name="userpwd"
                       autocomplete="off"
                       id="password" aria-label="password">
                <span class="input-group-text bg-white bsa-cursor-pointer"><i class="bi bi-eye-slash"></i></span>
            </div>
        </div>

        <div class="mb-3">
            <div class="input-group bsa-show_hide_password">
                <span class="input-group-text bg-white"><i class="bi bi-key"></i></span>
                <input type="password" class="form-control" placeholder="请再次输入密码"
                       name="confirmPassword"
                       autocomplete="off"
                       id="confirmPassword" aria-label="confirmPassword">
                <span class="input-group-text bg-white bsa-cursor-pointer"><i class="bi bi-eye-slash"></i></span>
            </div>
        </div>

        <div class="d-grid gap-2">
            <button class="btn btn-outline-info" type="submit"><i class="bi bi-box-arrow-in-right"></i> 注册</button>
        </div>
        <div class="mt-3 text-center">
            <a href="/login" class="btn btn-link link-success ">已有账号，去登录吧！</a>
        </div>
    </form>
</div>


<script src="lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="lib/jquery/dist/jquery.min.js"></script>
<script src="lib/formvalidation/js/formValidation.js"></script>
<script src="lib/formvalidation/js/framework/bootstrap.js"></script>
<script src="lib/formvalidation/js/language/zh_CN.js"></script>
<script src="dist/js/bootstrap-admin.min.js"></script>
<script src="dist/js/app.js"></script>

<!--&lt;!&ndash;假数据模拟,生产环境中请直接删除该js&ndash;&gt;-->
<!--<script src="dist/js/bootstrap-admin.mock.js"></script>-->

<script>

    $(function () {

        //前端表单验证
        $('#registerForm').formValidation({
            fields: {
                username: {
                    validators: {
                        notEmpty: true,
                    }
                },
                password: {
                    validators: {
                        notEmpty: true,
                    }
                },
                confirmPassword: {
                    validators: {
                        notEmpty: true,
                        identical: {
                            field: 'password',
                            message: '两次输入的密码不一致'
                        }
                    }
                }
            }
        }).on('success.form.fv', function (e) {
            //阻止表单提交
            e.preventDefault();
            //得到表单对象
            let $form = $(e.target);
            //获取数据
            let data = $form.serialize();
            console.log('Serialized form data:', data); // 添加此行来查看序列化后的表单数据
            //发起ajax请求
            $.ajax({
                method: 'post',
                url: '/api/register',
                //表单数据
                data: data,
            }).then(response => {
                console.log(response)
                if (response === 1) {
                    $.toasts({
                        type: 'success',
                        content: '注册成功，请登录',
                        onHidden: function () {
                            top.location.replace('/');
                        }
                    })
                }else {
                    $.toasts({
                        type: 'error',
                        content: '注册失败，请检查输入信息并重试',
                        onHidden: function () {
                            top.location.replace('/register');
                        }
                    })
                }
            });
        });
    })


</script>

</body>
</html>